<template>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>文件管理</el-breadcrumb-item>
    <el-breadcrumb-item>分享文件</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 内容区域 -->
  <el-card class="box-card">
    <!-- 搜索条件 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入用户id" v-model="queryParams.userId">
          <template #append>
            <el-button icon="Search" @click="search(1)"/>
          </template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="danger" @click="search">删除</el-button>
      </el-col>
    </el-row>

    <el-table :data="fileList" style="width: 100%">
      <el-table-column type="selection" width="100"></el-table-column>
      <el-table-column prop="shareId" label="分享ID" width="100"></el-table-column>
      <el-table-column prop="shareLink" label="分享链接" width="300"></el-table-column>
      <el-table-column prop="expireTime" label="过期时间(天)" width="200"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total"
                   :current-page="queryParams.pageNum" :page-sizes="[1, 5, 10]" :page-size="queryParams.pageSize"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import axios from "axios";

// 查询参数
const queryParams = ref({
  userId: '2',
  pageNum: '1', // 默认第一页
  pageSize: '', // 默认每页显示条目数
  total: '' // 总记录数
});

// 查询结果
const fileList = ref([]);

// 获取分享文件列表
const search = function (newPageSize) {
  axios.get('/share/list', {
    params: {
      userId: queryParams.value.userId
    }
  }).then(response => {
    fileList.value = response.data.records;
    queryParams.value.pageNum = parseInt(response.data.pageNum);
    queryParams.value.pageSize = parseInt(response.data.pageSize);
    queryParams.value.total = parseInt(response.data.total);
    console.log(queryParams.value.total)
  })
};

const handleSizeChange = (newPageSize) => {
  queryParams.value.pageSize = newPageSize;
  search(newPageSize); // 根据新的页面大小重新搜索
};

const handleCurrentChange = (newPageNum) => {
  queryParams.value.pageNum = newPageNum;
  search(); // 根据新的页码重新搜索
};

// 组件挂载时调用 search 方法
onMounted(() => {
  search();
});

</script>

<style scoped>
.box-card {
  margin-top: 20px;
}

.image-preview img {
  max-width: 100%;
  max-height: 200px;
  border: 1px solid #ccc;
}

/* 富文本编辑器样式 */
#introEditor {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}
</style>